<template>
    <div class="root">
        <Top class="top-aaa"><p>{{toptitle}}</p></Top>
        <div class="type-root">
            <div class="type-one" @click="type('超市便利')">超市便利
                <van-icon name="arrow-down"/>
            </div>
            <div class="type-one" @click="type('排序')">排序
                <van-icon name="arrow-down"/>
            </div>
            <div class="type-one" @click="type('筛选')">筛选
                <van-icon name="arrow-down"/>
            </div>
        </div>
<!--        超市便利-->
        <div class="top-root" v-if="msg" @click="hide()">
            <div class="top-one">
                <div class="one-left">
                    <div v-for="(v,i) in left" :key="i" class="left-div" @click.stop="oneClick(i)"><img :src="img[i]" alt="">
                        {{v.name}}
                        <van-tag color="#ccc" round>{{v.count}}</van-tag>
                        <span class="right"><van-icon name="arrow"/></span></div>
                </div>
                <div class="one-right">
                    <div v-for="(v,i) in right" :key="i" class="right-div" @click="rightClick(v,i)">
                        {{v.name}}
                        <div>{{v.count}}</div>
                    </div>
                </div>
            </div>
        </div>
<!--        排序-->
        <div class="sort top-root"  @click="hide()" v-else-if="msg2">
            <div @click="sortClick('智能排序',1)"><span style="color:#6699CC;"><i class="el-icon-sort"></i></span><p>智能排序</p></div>
            <div @click="sortClick('离我最近',2)"><span style="color:#666699;"><i class="el-icon-location-outline"></i></span><p>离我最近</p></div>
            <div @click="sortClick('销量最高',3)"><span><van-icon name="fire" color="#FF0033" /></span><p>销量最高</p></div>
            <div @click="sortClick('起送价最低',4)"><span><van-icon name="gold-coin" color="#FFFF00" /></span><p>起送价最低</p></div>
            <div @click="sortClick('配送速度最快',5)"><span style="color:#99CC00;"><i class="el-icon-truck"></i></span><p>配送速度最快</p></div>
            <div @click="sortClick('评分最高',6)"><span style="color:#FFFF00;"><i class="el-icon-star-off"></i></span><p>评分最高</p></div>
        </div>
<!--        筛选-->
        <div class="select top-root" v-else-if="msg3"  @click="hide()">
<div class="select-root">
    <p>配送方式</p>
    <div class="fengniao" @click.stop="xuan('selectmsg7')"  :class="{CL:selectmsg7}"><span><van-icon name="success" v-if="selectmsg7"  /><van-icon name="free-postage" v-else/></span>蜂鸟专送</div>
    <p>商家属性(可以多选)</p>
    <div class="biaoqian">
        <div @click.stop="xuan('selectmsg1')" :class="{CL:selectmsg1}"><span><van-icon name="success" v-if="selectmsg1"  /><van-icon name="free-postage" v-else/></span> 品牌新店</div>
        <div @click.stop="xuan('selectmsg2')" :class="{CL:selectmsg2}"><span><van-icon name="success" v-if="selectmsg2"  /><van-icon name="free-postage" v-else/></span> 外卖保</div>
        <div @click.stop="xuan('selectmsg3')" :class="{CL:selectmsg3}"><span><van-icon name="success" v-if="selectmsg3"  /><van-icon name="free-postage" v-else/></span> 准时达</div>
        <div @click.stop="xuan('selectmsg4')" :class="{CL:selectmsg4}"><span><van-icon name="success" v-if="selectmsg4"  /><van-icon name="free-postage" v-else/></span> 新店</div>
        <div @click.stop="xuan('selectmsg5')" :class="{CL:selectmsg5}"><span><van-icon name="success" v-if="selectmsg5"  /><van-icon name="free-postage" v-else/></span> 在线支付</div>
        <div @click.stop="xuan('selectmsg6')" :class="{CL:selectmsg6}"><span><van-icon name="success" v-if="selectmsg6"  /><van-icon name="free-postage" v-else/></span> 开发票</div>
    </div>
    <div class="button">
        <van-button type="default" @click.stop="no()">取消</van-button>
        <van-button type="primary" @click.stop="affirm()">确认{{amount}}</van-button>
    </div>
</div>
        </div>
        <!--店铺展示-->
        <div class="shop">
        <div class="shop-root">
<!--            <p class="shop-p1">-->
<!--                <van-icon name="shop-o" size="14"/>-->
<!--                附近商家-->

<!--            </p>-->
            <div v-for="(v, i) in shop" :key="i" class="shop-root-book" @click="Shopdetail(v)" >
                <div class="shop-left">
                    <!--          <img data-v-2df9c5b6="" src="164ad0b6a3917599.jpg" class="shop_img">-->
                    <img data-v-2df9c5b6="" :src="'//elm.cangdu.org/img/'+v.image_path" class="shop_img"/>
                </div>
                <div class="shop-right">
                    <div class="shop-right-one">
                        <span class="one-span1">品牌</span><h4>{{ v.name }}</h4
                    ><span>保准票</span>
                    </div>
                    <div class="shop-right-two">
                        <span><el-rate v-model="v.rating" disabled show-score text-color="#ff9900"
                                       score-template="{value}" class="xing"></el-rate></span>
                        <span>月销售{{ v.recent_order_num }}单</span>
                        <div class="right-two-div">
<!--                            {{v.delivery_mode.text}}-->
                            <span>蜂鸟专送</span><span>准时达</span></div>
                    </div>
                    <div class="shop-right-shtte">
            <span
            >{{ v.float_minimum_order_amount }}元起送 /配送费{{
                v.float_delivery_fee
              }}元</span>
                        <span>{{ v.distance }}</span><span>{{ v.order_lead_time }}/</span>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <!--        店铺结束-->


    </div>

</template>

<script>
    import Top from "../components/Top";

    export default {
        name: "Shoptype",
        components: {Top},
        computed: {
            right() {
                let i = this.RightIndex;
                console.log(this.left[i]['sub_categories'])
                return this.left[i]['sub_categories'];
            },
            amount(){
                if (this.shu==0){
                    return ""
                }else {
                    return "("+this.shu+")"
                }
            }
        },
        data() {
            return {
                left: "",
                RightIndex: 1,
                img: [
                    "", "https://fuss10.elemecdn.com/b/ff/533cf9617bd57fe1dfb05603bebcfpng.png", "https://fuss10.elemecdn.com/4/35/a7eda7659bac613e524ca7c1ae12epng.png", "https://fuss10.elemecdn.com/6/23/5a6fce94bed63a21508f68a72c158png.png", "https://fuss10.elemecdn.com/6/55/ac1bfd1e818013a9f099e964f1e9djpeg.jpeg", "https://fuss10.elemecdn.com/a/c1/5c5dd59b641bdfdeb822362547fb4png.png", "https://fuss10.elemecdn.com/0/e0/7558e305abfb2618ae760142222f9png.png", "https://elm.cangdu.org/img/default.jpg", "https://fuss10.elemecdn.com/4/82/43703799592368585b23589cf3ba8png.png"],
                shop: "",//店铺展示信息
                msg:false,//弹框是否显示
                msg2:false,//
                msg3:false,

                toptitle:"",
                selectdata:["品牌新店","外卖保","准时达","新店"],
                selectArr:[false,false,false,false,false,false,false,],
                aaa:false,
                selectmsg1:"",
                selectmsg2:"",
                selectmsg3:"",
                selectmsg4:"",
                selectmsg5:"",
                selectmsg6:"",
                selectmsg7:"",
                shu:0,

            };
        },
        created() {

            this.axios.get("https://elm.cangdu.org/shopping/v2/restaurant/category").then(data => {
                // console.log(data.data);
                this.left = data.data;
                // console.log(data.data[1].sub_categories)
            }).catch(err => {
                console.log(err)
            });
            //请求店铺
            this.axios.get("https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762").then(data => {
                // this.msg=false;
                this.toptitle=this.$route.query.name;
                this.shop=data.data;

            })
        }, methods: {
            oneClick(i) {
                this.RightIndex = i;
            },
        //进入店铺详情
        Shopdetail(v) {
          // console.log(v,"wWiiWWI骄傲了房间as");
          this.$router.push({path:"/shopdetail",query:{id:v.id}})
        },
            //分类
            type(name){
                if(name=="超市便利"){
                    this.msg=!this.msg;
                    this.msg2=false;
                    this.msg3=false;
                }else if(name=="排序"){
                    this.msg2=!this.msg2;
                    this.msg=false;
                    this.msg3=false;
                }else if(name=="筛选"){
                    this.msg3=!this.msg3;
                    this.msg=false;
                    this.msg2=false;
                }
            },
            sortClick(name,index){
                console.log(name);
                this.msg2=false;
                this.axios.get("https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762&order_by="+index).then(data => {

                    // console.log(data.data);
                    this.shop=data.data;
                })
            },
            //分类详细点击
            rightClick(v,i) {
                console.log(i);
              // this.axios.get('https://elm.cangdu.org/shopping/restaurants?latitude=' + this.$store.state.geohash[1] +'&longitude=' + this.$store.state.geohash[0]+'&restaurant_category_ids[]=' + id).then(data=>{
              //   console.log(data);
              //   this.shopArray = data;
              // }).catch(error=>{
              //   console.log(error);
              // })
                this.axios.get("https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762&restaurant_category_ids[]="+v.id).then(data => {
                    this.msg=false;
                    this.toptitle=v.name;
                   this.shop=data.data;
                   console.log(data.data);
                })
            },
            //标签
            xuan(v){
                this[v]=! this[v];
                console.log(this[v])
                if(this[v]){
                    this.shu=this.shu+1;
                }else {
                    this.shu=this.shu-1;
                }

            },
            //hide隐藏面板
            hide(){
                this.msg=false
                this.msg2=false
                this.msg3=false
                console.log("走了")
            },
        //    取消按钮
            no(){
                   this.selectmsg1=false;
                this.selectmsg2=false;
                this.selectmsg3=false;
                this.selectmsg4=false;
                this.selectmsg5=false;
                this.selectmsg6=false;
                this.selectmsg7=false;
                this.shu=0;

            },
            affirm(){
                this.msg3=false;
            }

        },

    }
</script>

<style scoped>
    .top-aaa{
        position: fixed;
        width: 100%;
        z-index: 999;
    }
    .root{
        overflow: hidden;
    }
    .type-root {
        display: flex;
        background-color: #fff;
        border-bottom: .025rem solid #f1f1f1;
        position: fixed;
        top: 45px;
        width: 100%;
        justify-content: space-between;
        z-index: 999;

    }

    .type-one {
        width: 33.3%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-right: .025rem solid #e4e4e4;
    }

    .top-root {
        position:fixed;
        height: 86.5%;
        width: 100%;
        top: 13.5%;
        background-color: rgba(0,0,0,0.4);
        z-index: 999;
        /*display: flex;*/
        /*justify-content: space-between;*/
    }

    .top-one {
        width: 100%;
        display: flex;
        height: 50%;
        justify-content: space-between;
    }

    .one-left {
        width: 48%;
        padding-right: 2%;

        background-color: #f1f1f1;
    }

    .one-left img {
        width: 1rem;
        height: 1rem;
        vertical-align: middle;
        margin-right: .2rem;
    }

    .left-div {
        display: flex;
        padding: 0 .5rem;
        width: 100%;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        color: #666;
    }

    .one-right {
        width: 48%;
        padding-left: 2%;
        background-color: #fff;
        overflow-y: scroll;
    }

    .right-div {
        height: 30px;
        line-height: 30px;
        width: 95%;
        display: flex;
        justify-content: space-between;
        color: #666;
        padding-right: 5%;
        border-bottom: .025rem solid #e4e4e4;
    }

    /deep/ .van-tag--round {
        border-radius: 999px;
        height: 15px;
        margin-top: 7px;

    }
    /*排序*/
    .sort div{
        height: 50px;
        display: flex;
        align-items: center;
        background-color: white;
        padding-left: 20px;
    }
    .sort p{
        line-height: 50px;
        flex: auto;
        text-align: left;
        text-indent: .25rem;
        border-bottom: .025rem solid #e4e4e4;

        padding-left: 10px;

    }
    /*标签*/
    .biaoqian{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 3%;
        width: 94%;
        background-color: white;
    }
    .biaoqian div,.fengniao{
        display: flex;
        align-items: center;
        border: .025rem solid #eee;
        width: 27%;
        height: 1.4rem;
        margin-right: 1%;
        border-radius: 1%;
        padding:1%;
        margin-bottom:1%;
    }
    .fengniao{
        margin-left: 10px;
    }
.select-root{
    background-color: white;
}
    .select-root p{
        font-size: .4rem;
        color: #333;
        line-height: 1.5rem;
        height: 1.5rem;
        text-align: left;
        padding-left: .5rem;
        background-color: #fff;
    }
    .CL{
        color: #3190e8;
    }
    .button{
        padding: 10px;
        display: flex;
        background-color: #f5f5f5;
        justify-content: space-around;
    }


   

     /deep/.van-button--primary,/deep/.van-button--default {

         width: 100px;
     }


    /*    店铺展示*/
    /*shop*/
    .shop-root {
        background-color: #fff;
        margin-top: 85px;

    }

    .shop-p1 {
        color: #999;
        font: .55rem/1.6rem Microsoft YaHei;
        padding-left: 10px;
        line-height: 40px;
        height: 40px;
        /*margin-bottom: 10px;*/
    }

    .shop-root-book {
        display: flex;
        margin-bottom: 10px;
        border-bottom: aliceblue 1px solid;
        justify-content: space-between;
        padding: 5px;
    }

   

    .shop-right {
        width: 85%;
    }

    .shop-left img {
        width: 2.7rem;
        height: 2.7rem;
        display: block;
        margin-right: 0.4rem;
    }

    .shop-right span, .shop-right h4 {
        display: inline-block;
    }

    .shop-right-one, .shop-right-two, .shop-right-shtte {
        margin-bottom: 10px;
        /* background-color: rgb(148, 45, 45); */
    }

    .shop-right-one span:nth-child(1) {
        font-size: .5rem;
        line-height: .6rem;
        color: #333;
        background-color: #ffd930;
        padding: 0 .1rem;
        border-radius: .1rem;
        margin-right: .2rem;
    }

    .shop-right-one h4:nth-child(2) {
        width: 12rem;
        color: #333;
        padding-top: .01rem;
        font: 16px PingFangSC-Regular;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shop-right-one span:nth-child(3) {
        /* background-color: rgb(67, 110, 252); */
        float: right;
        font-size: .5rem;
        color: #999;
    }

    /*.xing i{*/
    /*    background-color: #3190e8;*/
    /*}*/
    .shop-right-two span:nth-child(1) i {

        font-size: 1px;
        margin-right: 0px;
        color: #C0C4CC;
        transition: .3s;

    }

    .shop-right-two span:nth-child(2) {
        margin-left: 5px;
        font-size: .4rem;
        color: #666;
    }

    .right-two-div span:nth-child(1) {
        font-size: 4px;
        color: #fff;
        background-color: #3190e8;
        border: .025rem solid #3190e8;
        border-radius: 3px;
        /* float: right; */
    }

    .right-two-div span:nth-child(2) {
        font-size: 4px;
        color: #3190e8;
        border-radius: 3px;
        border: .025rem solid #3190e8;
        margin-left: 2px;
        /* float: right; */
    }

    .right-two-div {
        float: right;
    }

    .shop-right-shtte span:nth-child(1), .shop-right-shtte span:nth-child(3), .shop-right-shtte span:nth-child(2) {
        font-size: 4px;
    }

    .shop-right-shtte span:nth-child(2), .shop-right-shtte span:nth-child(3) {
        float: right;
    }

    .shop-right-shtte span:nth-child(2) {
        color: #3190e8;
    }

    /deep/ .el-rate__icon {
        font-size: 5px;
        margin: 0;
        /*z-index: 0;*/
    }

    /deep/ .van-swipe__indicator {
        background-color: rgb(5, 5, 5);
    }

</style>